<!DOCTYPE html>
<html lang="en">
   

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            margin: 0 auto;
            width: 1000px;
        }
    </style>
    <!-- bootstrap 的 css -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <!-- jQuery必须在所有插件之前引入页面 -->
    <script src="./bootstrap/js/jqurty.min.js"></script>
    <!-- bootstrap  js -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</head>

<body>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators 指标  小圆点-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            <li data-target="#carousel-example-generic" data-slide-to="3"></li>
        </ol>

        <!-- Wrapper for slides 轮播图主体  -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="upload/focus1.jpg" alt="...">
                <div class="carousel-caption">
                    123
                </div>
            </div>
            <div class="item ">
                <img src="./upload/focus2.jpg" alt="...">
                <div class="carousel-caption">
                    222
                </div>
            </div>
            <div class="item ">
                <img src="./upload/focus3.jpg" alt="...">
                <div class="carousel-caption">
                    3333
                </div>
            </div>
            <div class="item ">
                <img src="./upload/pic1.jpg" alt="...">
                <div class="carousel-caption">
                    4444
                </div>
            </div>
        </div>

        <!-- Controls 左右侧按钮 -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">上一张</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">下一张</span>
        </a>
    </div>
    <script>
        /* 
            bootstrap 的用法总结：H5  CSS JS
                1. 看官方文档，作用。
                2. 按要求引入 js css h5
                3. 调试参数
        */
        $('.carousel').carousel({
            interval: 2000
        })
    </script>
</body>

</html>